<template>
  <div class="dash_con dash_1 df-sb">
    <div class="headleft">
        <p class="p1">
          早安，管理员，请开始一天的工作吧
        </p>
        <p class="p2">
          成都市 天气：大雨 温度：23摄氏度 风向：东北 风力：≤3级 空气湿度：77
        </p>
      </div>
      <div class="headright">
        <!-- <p>{{ beijingTime }}</p> -->
        <el-image class="img" :src="img" />
      </div>
        <!-- 信息 -->
        <!-- <el-row :gutter="20" class="fl">
          <el-col :span="8">
            <el-icon><Sort /></el-icon>
            <span>今日流量 (1231231)</span>
          </el-col>
          <el-col :span="8">
            <el-icon><UserFilled /></el-icon>
            <span>总用户数 (24001)</span>h3
          </el-col>
          <el-col :span="8">
            <el-icon><Comment /></el-icon>
            <span>好评率 (99%)</span>
          </el-col>
        </el-row> -->

    </div>
  <h3>数据统计</h3>
  <div class="statics" style="background-color: #fff;">
    <el-row>
    <el-col :span="5">
      <el-statistic v-model="time.value" title="新增用户" :value="268500" />
    </el-col>
    <el-col :span="5">
      <el-statistic :value="138">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            男女比率
            <el-icon style="margin-left: 4px" :size="12">
              <Male />
            </el-icon>
          </div>
        </template>
        <template #suffix>/100</template>
      </el-statistic>
    </el-col>
    <el-col :span="5">
      <el-statistic title="成交金额" :value="172000" />
    </el-col>
    <el-col :span="5">
      <el-statistic title="未读消息" :value="562" id="never">
        <template #suffix>
          <el-icon style="vertical-align: -0.125em">
            <ChatLineRound />
          </el-icon>
        </template>
      </el-statistic>
    </el-col>
  </el-row>
  </div>

  <!-- 图标 -->
  <div class="right-f">
    <div class="table">
      <div id="barChart" style="width: 50vw; 
      height: 50vh; 
      margin: 0 auto;
      margin-top: 30px;
      " />
    </div>

    <div class="el-all">
      <!-- 待处理事务 -->
      <div class="matter">
      <h4>待处理事务</h4>
      <el-col :span="20" style="margin: 0 auto;" class="grid-matter">
        <div class="el-matter">
          <div>100</div>
          <div class="wordStl">代付款</div>
          <el-icon class="cb">
            <Iphone />
          </el-icon>
        </div>

        <div class="el-matter">
          <div>100</div>
          <div class="wordStl">代发货</div>
          <el-icon class="cp">
            <Van />
          </el-icon>
        </div>

        <div class="el-matter">
          <div>100</div>
          <div class="wordStl">售后</div>
          <el-icon class="cg">
            <Service />
          </el-icon>
        </div>

        <div class="el-matter">
          <div>100</div>
          <div class="wordStl">物流异常</div>
          <el-icon  class="cy">
            <WarnTriangleFilled />
          </el-icon>
        </div>
      </el-col>
    </div>
    <!-- 商品概况 -->
    <div class="matters">
      <h4>商品概况</h4>
      <el-col :span="20" style="margin: 0 auto;" class="grid-matter">
        <div class="el-matter">
          <div>100</div>
          <div class="wordStl">全部商品</div>
          <el-icon class="cb">
            <Menu />
          </el-icon>
        </div>

        <div class="el-matter">
          <div>100</div>
          <div class="wordStl">已上架</div>
          <el-icon class="cq">
            <Upload />
          </el-icon>
        </div>

        <div class="el-matter">
          <div>100</div>
          <div class="wordStl">已下架</div>
          <el-icon  class="cr">
            <Download />
          </el-icon>
        </div>

        <div class="el-matter">
          <div>100</div>
          <div class="wordStl">异常商品</div>
          <el-icon  class="cy">
            <WarningFilled />
          </el-icon>
        </div>
      </el-col>
    </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ChatLineRound, Male } from '@element-plus/icons-vue'
import { reactive, onMounted ,ref} from 'vue'
import * as echarts from 'echarts';
function getImageUrl(name: string) {
  return new URL(`../../assets/${name}.png`, import.meta.url).href
}

const time = reactive({
  value: '',
})
const beijingTime = ref('')
const img = ref('')
img.value = getImageUrl('33')
const activities = [
  {
    content: 'Event start',
    timestamp: '2018-04-15',
  },
  {
    content: 'Approved',
    timestamp: '2018-04-13',
  },
  {
    content: 'Success',
    timestamp: '2018-04-11',
  },
]

// 挂载后
onMounted(() => {
  var app: any = {};
  type EChartsOption = echarts.EChartsOption;
  const barChart = document.querySelector('#barChart') as HTMLElement
  const myChart = echarts.init(barChart)
  var option: EChartsOption;

  const categories = (function () {
    let now = new Date();
    let res = [];
    let len = 10;
    while (len--) {
      res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
      now = new Date(+now - 60000);
    }
    return res;
  })();
  const categories2 = (function () {
    let res = [];
    let len = 10;
    while (len--) {
      res.push(10 - len - 1);
    }
    return res;
  })();
  const data: number[] = (function () {
    let res = [];
    let len = 10;
    while (len--) {
      res.push(Math.round(Math.random() * 1000));
    }
    return res;
  })();
  const data2: number[] = (function () {
    let res = [];
    let len = 0;
    while (len < 10) {
      res.push(Math.round(Math.random() * 500));
      len++;
    }
    return res;
  })();

  // 绘制图表
  myChart.setOption({
    color: ['#5473e8', '#23bcca'],
    title: {
      text: '访问量趋势'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#5473e8'
        }
      }
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    dataZoom: {
      show: false,
      start: 0,
      end: 100
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        data: categories
      },
      {
        type: 'category',
        boundaryGap: true,
        data: categories2
      }
    ],
    yAxis: [
      {
        type: 'value',
        scale: true,
        name: '在线',
        max: 1000,
        min: 0,
        boundaryGap: [0.2, 0.2]
      },
      {
        type: 'value',
        scale: true,
        name: '下单',
        max: 1000,
        min: 0,
        boundaryGap: [0.2, 0.2]
      }
    ],
    series: [
      {
        name: '下单人数',
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: data,
        barWidth: '30%',
      },
      {
        name: '在线人数',
        type: 'line',
        data: data2
      }
    ],
  }),

    app.count = 11;
  // 定时器动态渲染
  setInterval(function () {
    let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');

    data.shift();
    data.push(Math.round(Math.random() * 1000));
    data2.shift();
    data2.push(Math.round(Math.random() * 500));

    categories.shift();
    categories.push(axisData);
    categories2.shift();
    categories2.push(app.count++);

    myChart.setOption<echarts.EChartsOption>({
      xAxis: [
        {
          data: categories
        },
        {
          data: categories2
        }
      ],
      series: [
        {
          data: data
        },
        {
          data: data2
        }
      ]
    });
  }, 6000);
})

// onMounted(() => {
//   // const four = document.querySelector('#four') as HTMLElement
//   const four = document.getElementById('four') as HTMLElement
//   const myChartFour = echarts.init(four)
//   // myChartFour.setOption(optionFour)

//   const colorList = reactive([
//     '#FDA085', '#F6D365', '#E8B223', '#3E5660', '#efc97b', '#374e90', '#77a4ef', '#ef9f77', '#89e645', '#e67645',
//   ])
//   myChartFour.setOption({
//     // 图表标题
//     title: {
//       show: true, // 显示策略，默认值true,可选为：true（显示） | false（隐藏）
//       // text: '"2020年11月份第1周各单品被特采次数   ', // 主标题文本，'\n'指定换行
//       x: 'center', // 水平安放位置，默认为左对齐，可选为：
//       // 'center' ¦ 'left' ¦ 'right'
//       // ¦ {number}（x坐标，单位px）
//       y: 'center', // 垂直安放位置，默认为全图顶端，可选为：
//       // 'top' ¦ 'bottom' ¦ 'center'
//       // ¦ {number}（y坐标，单位px）
//       // textAlign: null          // 水平对齐方式，默认根据x设置自动调整
//       backgroundColor: 'rgba(0,0,0,0)',
//       borderColor: '#ccc', // 标题边框颜色
//       borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
//       padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
//       // 接受数组分别设定上右下左边距，同css
//       itemGap: 1, // 主副标题纵向间隔，单位px，默认为10，
//       textStyle: {
//         fontSize: 18,
//         fontWeight: 'bolder',
//         color: '#FFFFFF', // 主标题文字颜色
//       },
//       subtextStyle: {
//         color: '#FFFFFF', // 副标题文字颜色
//       },
//     },
//     backgroundColor: '#fffFFF',
//     tooltip: {},
//     animationDurationUpdate(idx: any) {
//       // 越往后的数据延迟越大
//       return idx * 10
//     },
//     animationEasingUpdate: 'bounceIn',
//     color: ['#fffFFF', '#fffFFF', '#fffFFF'],
//     series: [{
//       type: 'graph',
//       layout: 'force',
//       force: {
//         repulsion: 300,
//         edgeLength: 10,
//       },
//       roam: true,
//       label: {
//         normal: {
//           show: true,
//         },
//       },
//       data: [{
//         name: '沙发',
//         value: 130,
//         symbolSize: 130,
//         draggable: true,
//         itemStyle: {
//           normal: {
//             shadowBlur: 10,
//             shadowColor: colorList[0],
//             color: colorList[0],
//           },
//         },
//       },
//       {
//         name: '衣柜',
//         value: 150,
//         symbolSize: 150,
//         draggable: true,
//         itemStyle: {
//           normal: {
//             shadowBlur: 10,
//             shadowColor: colorList[1],
//             color: colorList[1],
//           },
//         },
//       },
//       {
//         name: '空调',
//         value: 100,
//         symbolSize: 100,
//         draggable: true,
//         itemStyle: {
//           normal: {
//             shadowBlur: 10,
//             shadowColor: colorList[2],
//             color: colorList[2],
//           },
//         },
//       },
//       {
//         name: '软床垫',
//         value: 90,
//         symbolSize: 90,
//         draggable: true,
//         itemStyle: {
//           normal: {
//             shadowBlur: 10,
//             shadowColor: colorList[3],
//             color: colorList[3],
//           },
//         },
//       },
//       {
//         name: '化妆台',
//         value: 90,
//         symbolSize: 90,
//         draggable: true,
//         itemStyle: {
//           normal: {
//             shadowBlur: 10,
//             shadowColor: colorList[4],
//             color: colorList[4],
//           },
//         },
//       },
//       {
//         name: '厨房用具',
//         value: 100,
//         symbolSize: 100,
//         draggable: true,
//         itemStyle: {
//           normal: {
//             shadowBlur: 10,
//             shadowColor: colorList[5],
//             color: colorList[5],
//           },
//         },
//       },
//       {
//         name: '家电家器',
//         value: 8,
//         symbolSize: 80,
//         draggable: true,
//         itemStyle: {
//           normal: {
//             shadowBlur: 10,
//             shadowColor: colorList[6],
//             color: colorList[6],
//           },
//         },
//         url: 'https://gallery.echartsjs.com/preview.html?c=xPLngHx_Z&v=1',
//       }],
//     }],

//   })
// })
</script>

<style lang= "less" scoped>
.dash_con{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  // box-shadow: 3px 3px 2px 3px#d6d3d3;
  padding: 20px;
  box-sizing: border-box;
  .headleft{
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
  }
  .headleft .p1{
    font-size: 22px;
    font-weight: 600;
  }
  .headleft .p2{
    margin: 20px 0 20px 0;
  }
  .headright{
    display: flex;
    align-items: center;
    p{
      font-size: 18px;
      margin-right: 10px;
    }
    .img {
    width: 130px;
    height: 130px;
    margin-right: 20px;
    margin-left: 20px;
  }
  }
}
h3 {
  font-family: '思源黑体 CN';
}

.table {
  width: 52vw;
  height: 50vh;
  background: white;
  border-radius: 10px;
  box-shadow: 5px 5px 5px 5px#d6d3d3;
}

.el-row {
  justify-content: space-between;
}

.el-col {
  text-align: center;
  border-radius: 10px;
}

:deep(.el-statistic__head) {
  font-size: 16px;
  line-height: 20px;
}

.el-col-6 {
  max-width: 25%;
  flex: 0 0 25%;
}

.el-col[data-v-0ef3d734] {
  height: 80px;
  // margin-right: 10px;
  background: #e5b78a;
  box-sizing: border-box;
  padding: 20px;
}

.el-col:nth-of-type(1) {
  background: transparent;
}

.el-col:nth-of-type(2) {
  background: transparent;
}

.el-col:nth-of-type(3) {
  background: transparent;
}

.el-col:nth-of-type(4) {
  background: transparent;
}

.right-f {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.dash_con {
  border-radius: 10px;
}

.el-all {
  font-size: 12px;
    width: calc(100% - 55vw);
    height: 50vh;
    display: flex;
    flex-direction: column;

    h3 {
      margin-left: 30px;
    }
  }

.matter {
  width: 100%;
  height: 23vh;
  line-height: 20px;
  background-color: white;
  margin-bottom: 30px;
  border-left: 6px solid #556feb;
  border-radius: 10px;
  box-shadow: 5px 5px 5px 5px#d6d3d3;
}

.grid-matter {
    display: flex;
    justify-content: space-between;
    color: grey;
    align-items: center;
    background: #fff;
  }
.matters {
  width: 100%;
  height: 23vh;
  line-height: 20px;
  background-color: white;
  border-radius: 10px;
  border-left: 6px solid #556feb;
  box-shadow: 5px 5px 5px 5px#d6d3d3;

}

.statics .el-statistic{
  border-right: 2px solid #E9ECF7;
}

#never.el-statistic {
  border-right: none;
}

.el-matter {
  // border-right: 2px solid #E9ECF7;
  // padding: 10px;
  .el-icon {
    font-size: 20px;
  }
}
.wordStl {
  color: #000;
  font-size: 16px;
  margin: 8px 0;
}
.cb {
  color: #2c9ef7;
}
.cp {
  color: #b793f4;
}

.cg {
  color: #0dd68e;
}

.cy {
  color: #fead51;
}

.cq {
  color: #11d0b8;
}

.cr {
  color: #f5705f;
}

h4 {
  font-size: 17px;
  margin-left: 15px;
}
</style>